<template>
  <view class="index">
    <view class="content">
      <view class="box">
        <!-- <view class="title">蒙自数字藏品</view>
        <view class="sub">创建你的专属头像</view> -->
        <view class="img-box">
          <view class="head-box">
            <view class="head" v-if="Upshot == ''" id="head">
              <view class="h1">
                <image :src="bgFile"></image>
              </view>
              <image v-if="imgUrl != ''" :src="imgUrl"></image>
            </view>
            <view class="lastImg" v-else>
              <image :src="Upshot"></image>
            </view>
          </view>
          <view class="list fn-clear">
            <view class="li" v-for="item in List" @click="getImg(item)"><image :src="item"></image></view>
          </view>
        </view>
        <view class="text">请先将微信头像保存到手机</view>
        <view class="btn b1" @click="openPhoto" style="margin-right:7%">打开相册</view>
        <view class="btn b2" @click="saveHead">合成头像</view>
      </view>
    </view>
  </view>
</template>

<script>
import { reactive, toRefs } from 'vue';
import Taro,{ useDidShow } from "@tarojs/taro";
import html2canvas from "html2canvas";
import './index.scss'

export default {
  setup () {
    const state = reactive({
      msg:'Hello world',
      List:[
        require('@/images/img1.png'),
        require('@/images/img2.png'),
        require('@/images/img3.png'),
        require('@/images/img4.png'),
        require('@/images/img5.png'),
        require('@/images/img6.png')
      ],
      imgUrl:require('@/images/img1.png'),
      bgFile:'',
      Upshot:''
    })
    const getImg = (item) =>{
      console.log(item);
      state.imgUrl = item;
    }
    const openPhoto = () =>{
       Taro.chooseImage({
            count: 1,
            sizeType: ['original','compressed'],
            sourceType: ['album'],
            success: async (res) => {
                const file = res.tempFiles[0].path;
                state.bgFile = file;
            }
        })
    }
    const saveHead = () =>{
      // html2canvas(document.querySelector("#head")).then((canvas) => {
      //   var url = canvas.toDataURL("image/png",1.0);
      //   state.Upshot = url
      // });
      if(state.bgFile == ''){
        Taro.showToast({
            title:'请选择头像',
            duration:2000,
            icon:'none',
            mask:false
        })
      }else{
        var canvas = document.createElement("canvas");
        canvas.width = 400;
        canvas.height = 400;
        var context = canvas.getContext("2d");
        context.rect(0, 0, canvas.width, canvas.height);
        context.fillStyle = "#fff";
        context.fill();
        var myImage = new Image();
        myImage.src = state.bgFile;    //背景图片  你自己本地的图片或者在线图片
        myImage.scale = 4;
        myImage.crossOrigin = 'Anonymous';
        myImage.onload = function () {
                context.drawImage(myImage, 0, 0, 400, 400);
                var myImage2 = new Image();
                myImage2.src = state.imgUrl;   //你自己本地的图片或者在线图片
                myImage2.scale = 4;
                myImage2.crossOrigin = 'Anonymous';

                myImage2.onload = function () {
                    context.drawImage(myImage2, 0, 0, 400, 400);
                    var base64 = canvas.toDataURL("image/png",1.0);  //"image/png" 这里注意一下
                    state.Upshot = base64;
                    Taro.showToast({
                        title:'合成成功，请长按图片保存！',
                        duration:2000,
                        icon:'success',
                        mask:false
                    })
                }
          }
       }
    }

    return {
      ...toRefs(state),
      getImg,
      openPhoto,
      saveHead
    }
  }
}
</script>
